import React from 'react'
import ReactDom from 'react-dom'
const todoList = ["图雀", "图雀写作工具", "图雀社区", "图雀文档"];
// 函数式组件
// function Todo(props) {
//   console.log('props', props)
//   return <li>{props.content} from {props.from}</li>
// }
// 类组件
class Todo extends React.Component {
  render () {
    return this.props.content === '图雀' ? 
      <li
        className={this.props.index % 2 === 0 ? 'clicked' : 'unClick'}
        style={{color: this.props.index % 2 === 0 ? 'red' : '#000'}}
      >Hello, {this.props.content}</li>
      : 
      <li
        className={this.props.index % 2 === 0 ? 'clicked' : 'unClick'}
        style={{ color: this.props.index % 2 === 0 ? 'red' : '#000'}}
      >你好, {this.props.content}</li>
  }
}

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      todoList: [],
      newAddValue: ''
    }
  }
  componentDidMount () {
    console.log('componentDidMount')
    this.timer = setTimeout(() => {
      this.setState({
        todoList: todoList
      })
    }, 2000)
  }
  componentWillUnmount () {
    console.log('componentWillUnmount')
    window.clearTimeout(this.timer)
  }
  handleInput (e) {
    this.setState({
      newAddValue: e.target.value
    })
  }
  handleBtnClick () {
    const newList = this.state.todoList.concat(this.state.newAddValue)
    this.setState({
      todoList: newList,
      newAddValue: ''
    })
  }
  render () {
    return (
      <div>
        <input onInput={e => this.handleInput(e)} id="input" placeholder="请输入新的待办事项" />
        <ul>
          {
            this.state.todoList.map((item, index) => <Todo content={item} key={index} index={index}/>
            )
          }
        </ul>
        <button onClick={e => this.handleBtnClick()}>按钮</button>
      </div>
    )
  }
}
ReactDom.render(<App />, document.getElementById('root'))